<template>
	<view class="container">
		<!-- #ifdef APP-NVUE -->
		<!-- 苹果登录 -->
		<view class="sign-in-with-apple" v-if="system >= 13 && platform=='ios'" @click="appleLogin">sign in with apple</view>
		<!-- #endif -->
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<nav-bar>{{Areaaddress}}</nav-bar>
		<!-- <view class="MP-search" @click="search()" style=""><input class="MP-search-input" type="text" disabled="true"	 placeholder="输入关键字搜索" /></view> -->
		<view class="MP-search" style=""><input class="MP-search-input" type="text" disabled="true" placeholder="输入关键字搜索" /></view>
		<!-- #endif -->
		<!-- 头部轮播 -->
		<!-- #ifdef MP -->
		<view class="carousel-section" style="margin-top: 80upx;">
			<!-- #endif -->
			<!-- #ifndef MP -->
			<view class="carousel-section">
				<!-- #endif -->
				<!-- 标题栏和状态栏占位符 -->
				<view class="titleNview-placing">
					<!-- 顶部横向导航栏 -->
					<!-- <view class="headr-nav">
						<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft">
							<view class="cu-item text-white" :class="index==TabCur?'cur':''" v-for="(item,index) in navs" :key="index" @tap="tabSelect"
							 :data-id="index">
								{{ item.name }}
							</view>
						</scroll-view>
					</view> -->
				</view>
				<!-- 背景色区域 -->
				<view class="titleNview-background"></view>
				<swiper class="carousel" circular @change="swiperChange" autoplay="true">
					<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToTabPage(item.url)">
						<image :src="item.pic" />
					</swiper-item>
				</swiper>
				<!-- 自定义swiper指示器 -->
				<view class="swiper-dots">
					<text class="num">{{ swiperCurrent + 1 }}</text>
					<text class="sign">/</text>
					<text class="num">{{ swiperLength }}</text>
				</view>
			</view>
			<!-- 分类 -->
			<view class="cate-section">
				<view class="cate-item" @click="navToTabPage('/pages/bargain/list')">
					<!-- <view class="cate-item" @click="showtext"> -->
					<image src="/static/miaojie/icon_cut.png"></image>
					<text>全民砍价</text>
				</view>
				<view class="cate-item" @click="navToTabPage('/pages/runShop/list')">
					<image src="/static/miaojie/icon_rob.png"></image>
					<text>妙街快抢</text>
				</view>
				<view class="cate-item" @click="navToTabPage1()">
					<image src="/static/miaojie/icon_send.png"></image>
					<text>品鉴福利</text>
				</view>
				<view class="cate-item" @click="navToTabPage2()">
					<image src="/static/miaojie/icon_advocacy.png"></image>
					<text>妙街代言</text>
				</view>
			</view>
			<!-- 复制super商品 排列全民砍价 妙街快抢页面 -->
			<view class="kanQiang">
				<view class="kanBox">
					<view class="kanHeader" @click="gokanjialist()">
						<!-- <view class="kanHeader"> -->
						<view class="kan_title">
							<image src="/static/miaojie/headline_cut@3x.png"></image>
							<text class="tit_txt" style="color: #F663DF;">全民砍价</text>
						</view>
						<text class="yticon icon-you"></text>
					</view>
					<view class="shopping">
						<view v-for="(item,index) in kanjialist" :key="index">
							<image :src="item.pic" mode=""></image>
							<view class="text">
								<text>￥{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="kanBox">
					<view class="kanHeader" @click="gokuaiqianglist()">
						<view class="kan_title">
							<image src="/static/miaojie/headline_rob@3x.png"></image>
							<text class="tit_txt" style="color: #FF4C4C;">妙街快抢</text>
						</view>
						<text class="yticon icon-you"></text>
					</view>
					<view class="shopping">
						<view v-for="(item,index) in kuaiqianglist" :key="index">
							<image :src="item.pic" mode=""></image>
							<view class="text">
								<text>￥{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 新品推荐 -->
			<view v-if='homeNewProductList && homeNewProductList.length>0' class="f-header m-t" @click="navToTabPage('../../pagesA/product/list')">
				<image src="/static/temp/h1.png"></image>
				<view class="tit-box">
					<text class="tit">新品推荐</text>
					<text class="tit2">Guess You Like It</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>

			<view class="guess-section" v-if='homeNewProductList && homeNewProductList.length>0'>
				<view v-for="(item, index) in homeNewProductList" :key="index" class="guess-item" @click="navToDetailPage1(item)">
					<view class="image-wrapper">
						<image :src="item.pic" mode="aspectFill"></image>
					</view>
					<text class="title clamp">{{ item.productName }}</text>
					<text class="price">￥{{ item.price }}</text>
				</view>
			</view>
			<view class="jingxuan_title" @click="tao()">
				<image src="../../static/miaojie/headline_recommended@3x.png" mode=""></image>
				<text>精选推荐</text>
				<image src="../../static/miaojie/headline_recommended@3x.png" mode=""></image>
			</view>

			<view class="guess-section">
				<view v-for="(item, index) in kuaiqiangalllist" :key="index" class="guess-item" @click="navToDetailPage(item)">
					<view class="image-wrapper">
						<image :src="item.pic" mode="aspectFill"></image>
					</view>
					<view class="section-text">
						<view class="title clamp-2">{{ item.name }}</view>
						<view style="display: flex;justify-content: space-between;">
							<view class="price"><text>￥</text>{{ item.price }}</view>
							<view class="price"><text>补贴:</text>{{ item.rewardPrice1 }}元</view>
						</view>
					</view>
				</view>
			</view>

			<aui-poster ref="poster" :mask="auiPoster.mask" :maskTapClose="auiPoster.maskTapClose" :image="auiPoster.image"
			 @callback="auiPosterCallback"></aui-poster>
		</view>
</template>

<script>
	import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
	import Api from '@/common/api';
	import coupon from '@/components/coolc-coupon/coolc-coupon';
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import auiPoster from '@/components/aui-poster/aui-poster.vue';
	import {
		formatDate
	} from '@/common/date';
	import {
		mapState
	} from 'vuex';
	import navBar from '@/components/zhouWei-navBar';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			auiPoster,
			coupon,
			uniNoticeBar,
			mallplusCopyright,
			uniLoadMore,
			navBar
		},
		data() {
			return {
				system: '', // 系统版本
				platform: '', // 平台
				auiPoster: {
					mask: true,
					maskTapClose: false,
					image: 'https://xbjz1.oss-cn-beijing.aliyuncs.com/upload/default/share.png'
				},
				keyword: '',
				pageNum: 1,
				loadingType: 'more', //加载更多状态
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				homeNewProductList: [],
				homeRecommendProductList: [],
				carouselList: [],
				hotProductList: [],
				brandList: [], // 推荐品牌
				homeFlashPromotion: [], // 当前秒杀场次
				subjectList: [], //推荐专题
				cat_list: [],
				groupHotGoodsList: [],
				couponList: [],
				storeList: [],
				announcement: [],
				newProductList: [],
				Areaaddress: '', //当前位置
				scrollLeft: 0,
				TabCur: 0,
				navs: [{
					name: '推荐',
					id: 1
				}, {
					name: '买卖',
					id: 2
				}, {
					name: '美团',
					id: 3
				}, {
					name: '服装',
					id: 4
				}, {
					name: '米斯',
					id: 5
				}, {
					name: '日用品',
					id: 6
				}, {
					name: '男装',
					id: 7
				}, {
					name: '苹果',
					id: 8
				}],
				sel: 1,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				kanjialist: [],
				kuaiqianglist: [],
				kuaiqiangalllist: [],
				isVip: false,
				currentPage: '1',
				pageTotal: ''
			};
		},
		//加载更多
		onReachBottom() {
			if (this.pageTotal > this.currentPage) {
				this.currentPage++
				this.getkuaiqiang()
			} else {
				this.loadingType = 'noMore'
			}
		},
		mounted: function() {
			this.getLocationInfo();
		},
		onShareAppMessage() {},
		onLoad(ops) {
			// 先判断 系统版本
			uni.getSystemInfo({
				success: (res) => {
					this.system = res.system
					this.platform = res.platform
				},
				fail: (err) => {},
				complete: () => {}
			})

			let isWeiXin = this.$common.isWeiXinBrowser();
			this.pageNum = 1;
			this.getNewProductList('refresh');
			if (ops && ops.invitecode) {
				this.$db.set('invitecode', ops.invitecode);
			}
			this.loadData();
			this.sysInfoMethod();
			let userInfos = uni.getStorageSync('userInfos') || '';
			if (userInfos.mjLevel !== 0) {
				this.isVip = true;
			} else {
				this.isVip = true;
			}
		},
		filters: {
			formatCreateTime(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
			},
			formatNull(value) {
				if (value === undefined || value === null || value === '') {
					return '暂无';
				} else {
					return value;
				}
			},
			formatLongText(value) {
				if (value === undefined || value === null || value === '') {
					return '暂无';
				} else if (value.length > 4) {
					return value.substr(0, 4) + '...';
				} else {
					return value;
				}
			},
			formatPayType(value) {
				if (value === 2) {
					return '支付宝';
				} else if (value === 1) {
					return '微信小程序';
				} else if (value === 3) {
					return '余额支付';
				} else if (value === 5) {
					return '积分兑换';
				}
			},
		},
		onShow() {
			this.getkanjialist();
			this.getkuaiqiang();
			// 检查更新
			// #ifdef APP-PLUS
			this.getupdate();
			// #endif
		},
		methods: {
			tao(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: 'http://119.29.103.180:8080/share.html',
					title: '陶俊~生日快乐',
					summary: "分享生活，用程序员的方式展示自己",
					imageUrl: '/static/miaojie/my.jpg',
					success: function(res) {
					},
					fail: function(err) {
					}
				});
			},
			
			// 苹果登录
			appleLogin() {
				// 判断是 iOS13版本
				uni.login({
					provider: 'apple',
					success: (loginRes) => {
						uni.getUserInfo({
							provider: 'apple',
							success: (userInfoRes) => {

							},
							fail: (err) => {}
						})
					},
					fail: (err) => {}
				})
			},
			showtext() {
				uni.showToast({
					icon: 'none',
					title: '暂未开放！'
				})
			},
			//获取砍价商品列表
			async getkanjialist() {
				let params = {
					isQuick: 3,
					pageNum: 1
				}
				let res = await Api.apiCall('', 'single/pms/goods/list', params, true);
				if (res) {
					this.kanjialist = res.records.slice(0, 2);
				}
			},
			//获取快抢商品列表
			async getkuaiqiang() {
				let params = {
					isQuick: 2,
					pageNum: this.currentPage
				}
				let res = await Api.apiCall('', 'single/pms/goods/list', params, true);
				if (res) {
					this.pageTotal = res.pages;
					this.kuaiqianglist = res.records.slice(0, 2);
					this.kuaiqiangalllist = this.kuaiqiangalllist.concat(res.records);
				}
			},

			gokanjialist() {
				uni.navigateTo({
					url: '../bargain/list'
				})
			},
			gokuaiqianglist() {
				uni.navigateTo({
					url: '../runShop/list'
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			upper: function(e) {},
			lower: function(e) {},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			showPoster() {
				this.$refs.poster.show();
			},
			auiPosterCallback(e) {
				var _this = this;
				_this.auiToast.msg = '您关闭了广告弹窗';
				_this.$refs.toast.show();
			},
			getLocationInfo() {
				var _this = this;
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						uni.request({
							header: {
								"Content-Type": "application/text"
							},
							url: 'http://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude + '&key=' + Api.qqMapKey,
							success(re) {
								_this.Areaaddress = re.data.result.address;
								if (re.statusCode === 200) {} else {
									//console.log("获取信息失败，请重试！")
								}
							}
						});
					}
				});
			},
			async sysInfoMethod() {
				let params = {};
				let list = this.$db.get('sysInfo')
				if (!list) {
					list = await Api.apiCall('get', Api.index.sysInfo, params);
					this.$db.set('sysInfo', list)
				}

			},
			getCode() {
				var code = this.$common.getQueryString('code');
				code && this.getOpenId(code);
			},
			async getOpenId(code) {
				let params = {
					code: code,
					scope: 2,
					state: this.state
				};
				//模拟接口
				let res = await Api.apiCall('get', Api.order.authCodeToOpenid, params);
				if (res) {
					this.login(res);
					this.$db.set('userInfos', res.userInfo);
					this.$db.set('token', res.tokenHead + res.token);
					uni.switchTab({
						url: '/pages/index/index'
					});

					//this.openid = res.data
					//  this.toPayHandler('wechatpay')
				} else {
					this.$common.errorToShow(res);
				}
			},
			checkWXJSBridge(data) {
				let that = this;
				let interval = setInterval(() => {
					if (typeof window.WeixinJSBridge != 'undefined') {
						clearTimeout(interval);
						that.onBridgeReady(data);
					}
				}, 200);
			},
			onBridgeReady(data) {
				var _this = this;
				window.WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						appId: data.appid, // 公众号名称，由商户传入
						timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
						nonceStr: data.nonceStr, // 随机串
						package: data.package,
						signType: data.signType, // 微信签名方式：
						paySign: data.paySign // 微信签名
					},
					function(res) {
						if (res.err_msg === 'get_brand_wcpay_request:ok') {
							_this.$common.successToShow('支付成功');
						} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
							_this.$common.errorToShow('取消支付');
						} else {
							_this.$common.errorToShow('支付失败');
						}
						setTimeout(() => {
							_this.$common.redirectTo('/pages/order/payment/result?id=' + data.id);
						}, 1000);
					}
				);
			},

			/**
			 *
			 * 加载首页数据
			 */
			async loadData() {
				this.getBanner();
				this.getHotGoodsList();
				this.getNoticeList();
				this.getCouponList();
				this.getStoreList();
				this.homeNewProduct();
				this.homeRecommendProduct();
			},

			/**
			 * 获取新品推荐
			 */
			async homeNewProduct() {
				let params = {
					storeId: Api.selfStoreId,
					recommendStatus: 1,
					pageSize: 4
				};
				let groupHotGoodsList = await Api.apiCall('get', Api.index.homeNewProduct, params);
				if (groupHotGoodsList) {
					this.homeNewProductList = groupHotGoodsList.records;
				}
			},
			/**
			 * 获取人气推荐
			 */
			async homeRecommendProduct() {
				let params = {
					storeId: Api.selfStoreId,
					recommendStatus: 1,
					pageSize: 4
				};
				let groupHotGoodsList = await Api.apiCall('get', Api.index.homeRecommendProduct, params);
				this.homeRecommendProductList = groupHotGoodsList.records;
			},
			/**
			 * 获取轮播图
			 */
			async getBanner() {
				let params = {
					// storeId: '',
					// type:''
				};
				let data = await Api.apiCall('get', Api.index.bannerList, params);
				if (data) {
					this.carouselList = data || [];
					this.swiperLength = this.carouselList.length;
					this.titleNViewBackground = 'rgb(203, 87, 60)';
				}
			},
			/**
			 * 获取轮播图
			 */
			async getNoticeList() {
				let params = {
					pageSize: 3
				};
				let data = await Api.apiCall('get', Api.index.noticeList, params);
				if (data) {
					this.announcement = data.records || [];
				}
			},
			/**
			 * 获取轮播图
			 */
			async getCouponList() {
				let params = {
					pageSize: 3
				};
				let data = await Api.apiCall('get', Api.index.selectNotRecive, params);
				if (data) {
					this.couponList = data || [];
				}
			},
			/**
			 * 获取新品上市信息
			 */
			async getNewProductList(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more';
				}
				let params = {
					storeId: Api.selfStoreId,
					pageNum: this.pageNum
				};
				let list = await Api.apiCall('get', Api.goods.goodsList, params);

				let goodsList = list.records;

				if (type === 'refresh') {
					this.newProductList = [];
				}

				this.newProductList = this.newProductList.concat(goodsList);

				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType = this.newProductList.length > list.total ? 'nomore' : 'more';
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading();
					} else {
						uni.stopPullDownRefresh();
					}
				}
			},
			/**
			 * 获取团购信息
			 */
			async getStoreList() {
				let params = {
					pageSize: 5,
					isBoutique: 1,
					sort: 2
				};
				let groupHotGoodsList = await Api.apiCall('get', Api.member.storeList, params);
				this.storeList = groupHotGoodsList.records;
			},
			/**
			 * 获取团购信息
			 */
			async getHotGoodsList() {
				let params = {
					storeId: Api.selfStoreId,
				};
				let groupHotGoodsList = await Api.apiCall('get', Api.goods.groupHotGoodsList, params);
				this.groupHotGoodsList = groupHotGoodsList;
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			navToTabPage(url) {
				uni.navigateTo({
					url: url
				});
			},
			navToTabPage1() {
				if (this.isVip == true) {
					uni.navigateTo({
						url: '/pages/judge/list'
					});
				} else {
					uni.navigateTo({
						url: '/pages/judge/join'
					});
				}
			},
			navToTabPage2() {
				let token = uni.getStorageSync('token');
				if (token !== '') {
					uni.navigateTo({
						url: '/pages/endorsing/list'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录！'
					})
				}
			},
			//详情页
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.id;
				uni.navigateTo({
					url: `../../pagesA/product/product?id=${id}`
				});
			},
			//详情页
			navToDetailPage1(item) {
				//测试数据没有写id，用title代替
				let id = item.productId;
				uni.navigateTo({
					url: `../../pagesA/product/product?id=${id}`
				});
			},

			// 检查更新
			getupdate() {
				var This = this;
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
					//console.log(JSON.stringify(widgetInfo));
					// var server = 'http://mj.shijiyunshang.com/api/check/update'; //检查更新地址
					var shebei;
					// 
					uni.getSystemInfo({
						success: function(res) {
							shebei = res.platform; //客户端平台，值域为：ios、android
						}
					});
					var req = {
						//升级检测数据   widgetInfo.version应用版本号
						version: widgetInfo.version
					};
					//console.log(' widgetInfo.version应用版本号', req);//1.0.0
					uni.request({
						url: 'http://119.29.103.180:8083/api/single/home/isUpdate',
						dataType: 'json',
						method: 'GET',
						data: req,
						header: {
							'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
						},
						success: res => {
							//console.log('请求检查更新成功',JSON.stringify(res));
							if (res.data.data.status == 1) {
								uni.showModal({
									title: '更新提示',
									content: '系统升级',
									showCancel: true,
									success(ress) {
										if (ress.confirm) {
											if (res.data.data.url.substring(res.data.data.url.length - 3) == 'wgt') {
												var dtask = plus.downloader.createDownload(
													res.data.data.url, {
														//拿到下载任务的对象
														filename: '_doc/update/'
													},
													function(d, status) {
														plus.nativeUI.closeWaiting();
														if (status == 200) {
															//在回调中根据状态 进行操作
															var path = d.filename;
															This.installWgt(path);
														} else {
															uni.showToast({
																title: '配置出错,请检查网络链接！',
																duration: 2000
															});
														}
													}
												);

												dtask.start();

												dtask.addEventListener('statechanged', function(task, status) {
													//console.log(task)
													//console.log("statechanged", task.state);
													switch (task.state) {
														case 1:
															//console.log('正在下载');
															break;
														case 2:
															//console.log('已连接到服务器');
															break;
														case 3:
															This.jdt = parseInt((parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) * 100);
															if (This.jdt % 10 == 0) {
																if (This.jdt == 100) {
																	This.loading_status = false;
																} else {
																	This.loading_status = true;
																}
																//console.log('　　 已下载' + This.jdt + '%　　 ');
																break;
															}
														case 4:
															plus.nativeUI.closeWaiting();
															break;
													}
												});
											} else {
												// 整包更新  打开下载链接
												plus.runtime.openURL(res.data.data.url);
												// #ifdef APP-PLUS
												plus.runtime.quit(); //强制退出app
												// #endif
											}
										} else if (ress.cancel) {
											// '用户点击取消'
											// #ifdef APP-PLUS
											plus.runtime.quit(); //强制退出app
											// #endif
										}
									}
								});
							}
						},
						fail: err => {
							//console.log('请求检查更新失败',JSON.stringify(err));
						}
					});
				});
			},

			// 热更新调用的安装wgt文件的方法
			installWgt(path) {
				plus.nativeUI.showWaiting('更新中...');
				plus.runtime.install(
					path, {},
					function() {
						plus.nativeUI.closeWaiting();
						plus.nativeUI.alert('应用更新完成！', function() {
							plus.runtime.restart();
						});
					},
					function(e) {
						plus.nativeUI.closeWaiting();
						//console.log('安裝wgt文件失败[' + e.code + ']：' + e.message);
						plus.nativeUI.alert('更新失败[' + e.code + ']：' + e.message);
					}
				);
			}

		},

		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			//console.log('点击事件在这里')
			// uni.navigateTo({
			// 	url: '/pages/search/search'
			// });
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				var _this = this;

				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						if (res.result) {
							var data = JSON.parse(res.result);
							if (!data.errno) {
								if (data.type != 'merchant_money_plus') {
									uni.showToast({
										title: '该二维码非收款二维码'
									});
								} else if (data.data.merchant_id) {
									_this.merchant_id = data.data.merchant_id;

									if (data.data && data.data.user_id) {
										var user_id = data.data.user_id;
									} else {
										var user_id = '';
									}
									uni.navigateTo({
										url: '../../pagesB/payUser/payUser?mch_id=' + data.data.merchant_id + '&user_id=' + data.data.user_id
									});
								} else {
									uni.showToast({
										title: '扫码失败',
										icon: 'none'
									});
								}
							} else {
								uni.showToast({
									title: data.error,
									icon: 'none'
								});
							}
						}
					}
				});
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '../../pagesU/notice/notice'
				});
			}
		}
	};
</script>

<style lang="scss">
	.MP-search {
		background: #ffffff;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		width: 100%;
		z-index: 999;
	}

	.MP-search-input {
		font-size: 28upx;
		background: #f5f5f5;
		height: 60upx;
		width: 90%;
		border-radius: 50upx;
		text-align: center;
	}

	.mp-search-box {
		position: absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;

		.ser-input {
			flex: 1;
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			font-size: 28upx;
			color: $font-color-base;
			border-radius: 20px;
			background: rgba(255, 255, 255, 0.6);
		}
	}

	page {
		.cate-section {
			position: relative;
			z-index: 5;
			border-radius: 16upx 16upx 0 0;
			margin-top: -20upx;
		}

		.carousel-section {
			padding: 0;

			.titleNview-placing {
				padding-top: 0;
				height: 300upx;
				background-color: #D9104D;

				//顶部横向导航栏
				.headr-nav {
					z-index: 9999;
					// height: 60upx;
					// display: flex;
					// align-items: center;
					padding-left: 30upx;

					// margin-top: -80upx;
					.nav .cu-item.cur {
						font-size: 36upx;
						border-radius: 4upx;
					}

					.nav .cu-item {
						font-size: 32upx;
					}

					.nav .cu-item:first-child {
						margin-left: 0;
					}
				}

			}

			.carousel {
				.carousel-item {
					padding: 0;
				}
			}

			.swiper-dots {
				left: 45upx;
				bottom: 40upx;
				position: absolute;
				bottom: 70upx;
			}
		}
	}

	page {
		background: #f5f5f5;
	}

	.m-t {
		margin-top: 20upx;
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;

		.titleNview-placing {
			// 	box-sizing: content-box;
			padding-top: 44px;
			height: 300upx;
			background-color: #D9104D;
			// 	display: flex;
			// 	flex-direction: column;
			// 	justify-content: center;
			// 	box-sizing: border-box;
			// 	padding-top: 59upx;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			transition: 0.4s;
		}
	}

	.carousel {
		width: 100%;
		height: 350upx;
		margin-top: -130upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 710upx;
			height: 284upx;
			margin: 0 20upx;
			border-radius: 10upx;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx 22upx;
		background: #fff;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;

			.price {
				font-size: 28upx;
				color: #F94242;

				text {
					font-size: 18upx;
				}
			}
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			// opacity: 0.7;
			// box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}

	// 安民砍价  妙街快抢
	.kanQiang {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		padding: 32upx 20upx;
		background-color: #FFFFFF;

		.kanBox {
			width: 48%;

			.kanHeader {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				.kan_title {
					display: flex;
					align-items: center;

					.tit_txt {
						font-size: 34upx;
						font-weight: bold;
					}
				}

				image {
					width: 26upx;
					height: 40upx;
					margin-right: 10upx;
					margin-top: 6upx;
				}
			}

			.shopping {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 10upx;

				image {
					width: 160upx;
					height: 160upx;
					border-radius: 10upx;
				}

				.text {
					width: 160upx;
					font-size: 36upx;
					text-align: center;
					color: #F94242;

					text {
						font-size: 36upx;
					}
				}
			}
		}

	}

	.ad-1 {
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;

		image {
			width: 100%;
			height: 100%;
		}
	}

	/* 秒杀专区 */
	.seckill-section {
		padding: 0upx 20upx 20upx;
		background: #fff;

		.s-header {
			display: flex;
			align-items: center;
			height: 90upx;
			line-height: 1;

			.s-img {
				width: 140upx;
				height: 30upx;
			}

			.tip {
				font-size: $font-base;
				color: $font-color-light;
				// margin: 0 20upx 0 40upx;
			}

			.timer {
				display: inline-block;
				width: 40upx;
				height: 36upx;
				text-align: center;
				line-height: 36upx;
				margin-right: 14upx;
				font-size: $font-sm + 2upx;
				color: #fff;
				border-radius: 2px;
				background: rgba(0, 0, 0, 0.8);
			}

			.icon-you {
				font-size: $font-lg;
				color: $font-color-light;
				flex: 1;
				text-align: right;
			}
		}

		.floor-list {
			white-space: nowrap;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			width: 150upx;
			margin-right: 20upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			line-height: 1.8;

			image {
				width: 150upx;
				height: 150upx;
				border-radius: 6upx;
			}

			.price {
				color: $uni-color-primary;
			}
		}
	}

	.f-header {
		display: flex;
		align-items: center;
		height: 140upx;
		padding: 0upx 20upx;
		background: #fff;

		image {
			flex-shrink: 0;
			width: 26upx;
			height: 40upx;
			margin-right: 20upx;
		}

		.tit-box {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.tit {
			// font-size: $font-lg + 2upx; 这种写法不懂
			font-size: 38upx;
			font-family: PingFangSC-Semibold, PingFang SC;
			color: #FEA416;
			line-height: 1.3;
			font-weight: bold;
		}

		.tit2 {
			font-size: $font-sm;
			color: $font-color-light;
		}

		.icon-you {
			font-size: $font-lg + 2upx;
			color: $font-color-light;
		}
	}

	/* 团购楼层 */
	.group-section {
		background: #fff;

		.g-swiper {
			height: 650upx;
			padding-bottom: 20upx;
		}

		.g-swiper-item {
			width: 100%;
			padding: 0 20upx;
			display: flex;
		}

		image {
			width: 100%;
			height: 460upx;
			border-radius: 4px;
		}

		.g-item {
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		.left {
			flex: 1.2;

			// margin-right: 24upx;
			.t-box {
				padding-top: 20upx;
			}
		}

		.right {
			flex: 0.8;
			flex-direction: column-reverse;

			.t-box {
				padding-bottom: 20upx;
			}
		}

		.t-box {
			height: 160upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			line-height: 1.6;
		}

		.price {
			color: $uni-color-primary;
		}

		.m-price {
			font-size: $font-sm + 2upx;
			text-decoration: line-through;
			color: $font-color-light;
			margin-left: 8upx;
		}

		.pro-box {
			display: flex;
			align-items: center;
			margin-top: 10upx;
			font-size: $font-sm;
			color: $font-base;
			padding-right: 10upx;
		}

		.progress-box {
			flex: 1;
			border-radius: 10px;
			overflow: hidden;
			margin-right: 8upx;
		}
	}

	/* 分类推荐楼层 */
	.hot-floor {
		width: 100%;
		overflow: hidden;
		margin-bottom: 20upx;

		.floor-img-box {
			width: 100%;
			height: 320upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
			}
		}

		.floor-img {
			width: 100%;
			height: 100%;
		}

		.floor-list {
			white-space: nowrap;
			padding: 20upx;
			padding-right: 50upx;
			border-radius: 6upx;
			margin-top: -140upx;
			margin-left: 30upx;
			background: #fff;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
			position: relative;
			z-index: 1;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			width: 180upx;
			margin-right: 20upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			line-height: 1.8;

			image {
				width: 180upx;
				height: 180upx;
				border-radius: 6upx;
			}

			.price {
				color: $uni-color-primary;
			}
		}

		.more {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0;
			width: 180upx;
			height: 180upx;
			border-radius: 6upx;
			background: #f3f3f3;
			font-size: $font-base;
			color: $font-color-light;

			text:first-child {
				margin-bottom: 4upx;
			}
		}
	}

	/* 单条商品 */
	.goods-box-single {
		display: flex;
		padding: 20upx 0;

		.goods-img {
			display: block;
			width: 120upx;
			height: 120upx;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 0 30upx 0 24upx;
			overflow: hidden;

			.title {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				line-height: 1;
			}

			.attr-box {
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				padding: 10upx 12upx;
			}

			.price {
				font-size: $font-base + 2upx;
				color: $font-color-dark;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}
	}

	.price-box {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		padding: 20upx 30upx;
		font-size: $font-sm + 2upx;
		color: $font-color-light;

		.num {
			margin: 0 8upx;
			color: $font-color-dark;
		}

		.price {
			font-size: $font-lg;
			color: $font-color-dark;

			&:before {
				content: '￥';
				font-size: $font-sm;
				margin: 0 2upx 0 8upx;
			}
		}
	}

	.action-box {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100upx;
		position: relative;
		padding-right: 30upx;
	}

	.action-btn {
		width: 160upx;
		height: 60upx;
		margin: 0;
		margin-left: 24upx;
		padding: 0;
		text-align: center;
		line-height: 60upx;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
		background: #fff;
		border-radius: 100px;

		&:after {
			border-radius: 100px;
		}

		&.recom {
			background: #fff9f9;
			color: $base-color;

			&:after {
				border-color: #f7bcc8;
			}
		}
	}

	/* 猜你喜欢 */
	.guess-section {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 10upx 20upx;
		// background: #fff;

		.guess-item {
			display: flex;
			flex-direction: column;
			width: calc(50% - 5upx);
			padding-bottom: 30upx;
			background-color: #FFFFFF;
			margin-bottom: 10upx;
		}

		.image-wrapper {
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.section-text {
			padding: 20upx 20upx 0;

			.title {
				font-size: 30upx;
				line-height: 38upx;
				margin-bottom: 20upx;
			}

			.price {
				font-size: $font-lg + 4upx;
				color: $uni-color-primary;
				line-height: 1;

				text {
					font-size: 22upx;
				}
			}

			.old-price {
				font-size: 24upx;
				color: #999;
				margin-top: 10upx;
			}
		}

		.coupon_box {
			width: 100%;
			height: auto;
			display: table;
			padding: 6upx 26upx 26upx 26upx;
		}

		.other_type {
			width: 100%;
			height: 90upx;
			padding-top: 50upx;

			.text {
				width: 100%;
				border-top: 1px solid #eeeeee;
				display: block;
				text-align: center;
				position: relative;
			}

			.text span {
				width: 180upx;
				height: 40upx;
				line-height: 40upx;
				color: #999999;
				display: block;
				background: #ffffff;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -90upx;
				margin-top: -20upx;
				font-size: $font-base;
			}
		}
	}

	// 精选推荐

	.jingxuan_title {
		display: flex;
		justify-content: center;
		margin-top: 30upx;
		margin-bottom: 10upx;

		image {
			width: 38upx;
			height: 52upx;
		}

		text {
			font-size: 32upx;
			font-weight: 700;
			margin: 0 14upx;
		}
	}

	.getPosition {
		height: 100upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
		background-color: #fff;
	}

	.recommend-section {
		.s-header {
			padding: 20upx 30upx;
			font-size: 30upx;
			color: #303133;
			background: #fff;
			margin-top: 16upx;
			display: flex;
			align-items: center;

			&:before {
				content: '';
				width: 0;
				height: 40upx;
				margin-right: 24upx;
				border-left: 6upx solid #ec706b;
			}

			.icon-you {
				font-size: $font-lg;
				color: $font-color-light;
				flex: 1;
				text-align: right;
				margin-left: auto;
			}
		}

		/* 推荐列表 */
		.rec-section {
			background-color: #fff;

			.rec-item {
				display: flex;
				padding: 20upx 30upx;
				position: relative;

				&:after {
					content: '';
					position: absolute;
					left: 30upx;
					right: 0;
					bottom: 0;
					height: 0;
					border-bottom: 1px solid #eee;
					transform: scaleY(50%);
				}
			}

			.left {
				flex: 1;
				padding-right: 10upx;
				overflow: hidden;
				position: relative;
				padding-bottom: 52upx;

				.title {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					font-size: 32upx;
					color: #303133;
					line-height: 44upx;
				}

				.bot {
					position: absolute;
					left: 0;
					bottom: 4upx;
					font-size: 26upx;
					color: #909399;
				}

				.time {
					margin-left: 20upx;
				}
			}

			.right {
				width: 220upx;
				height: 140upx;
				flex-shrink: 0;
				position: relative;

				.img {
					width: 100%;
					height: 100%;
				}

			}
		}
	}
</style>
